<template>
  <div>
<!--<button @click="open">打开</button>-->
    <!--退库\领用详情-->
    <el-dialog :destroy-on-close="true" :visible.sync="showDetail" append-to-body width="90%" height="50%">
      <mobileDetail :detail-data="detailData" :lookType="lookType" ></mobileDetail>
    </el-dialog>
<div v-if="!showCanvas">
    <!--pc-->
    <div class="settings" v-if="!isMobile">
      <el-card class="box-card">
        <el-table
          :row-style="{ height: '10px' }"
          :cell-style="{ padding: '0px' }"
          :data="tableData"
          border
          v-loading="loading"
        >
          <el-table-column
            type="index"
            label="序号"
            v-if="false"
            align="center"
            width="50"
          >
          </el-table-column>
          <el-table-column prop="approvalName" label="事项" align="center">
          </el-table-column>
          <el-table-column prop="applyTime" label="时间" align="center">
          </el-table-column>
          <el-table-column prop="remark" label="备注" align="center"   :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="applyerName" label="发起人" align="center">
          </el-table-column>
          <!--<el-table-column label="操作" align="center" >-->
          <!--<template slot-scope="scope">-->
          <!---->
          <!--</template>-->
          <!--</el-table-column>-->
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <div class="optBtn-box">
              <el-button type="text" @click="approva(scope.row)">审批</el-button>
              <el-button  @click="look(scope.row)" type="text">查看</el-button>
              <el-button  @click="history(scope.row)" type="text">审批历史</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="text-align: center"
          :disabled="loading"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageNo"
          :page-sizes="[25, 50]"
          :page-size="queryInfo.pageSize"
          layout="sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-card>
      <historyLook :visible.sync="visible" :historyTables="historyTables" />
    </div>
    <!-- 手机 -->
    <div class="mobile-box" v-else>
      <ul v-if="tableData.length" v-loading="loading">
        <li class="ist-item" v-for="item in tableData" :key="item.id">
          <el-card>
            <el-col :span="24">
              <div class="title">事项：{{ item.approvalName }}</div>
            </el-col>
            <el-col :span="24">
              <div class="title">时间：{{ item.applyTime }}</div>
            </el-col>
            <el-col :span="24">
              <div class="title">备注</div>
              <div>{{ item.remark }}</div>
            </el-col>
            <el-col :span="24">
              <div class="title">发起人：{{ item.applyerName }}</div>
            </el-col>
            <el-col :span="24" class="btn-box">
              <el-button type="primary" size="mini" @click="approva(item)">审批</el-button>
              <!--手机提交-->
              <el-button v-if="item.documentTable === 'materail_draw_apply' || item.documentTable === 'stock_return_apply' " type="primary" size="mini"  @click="lookMobile(item)" >查看</el-button>
              <!--pc导入-->
              <el-button v-if="item.documentTable === 'import_approval_apply'" type="primary" size="mini" @click="look(item)">查看</el-button>
            </el-col>
          </el-card>
        </li>
        <el-pagination
          v-if="total>=queryInfo.pageSize"
          style="text-align: center; width: 90%; overflow: auto"
          :disabled="loading"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageNo"
          :page-sizes="[25, 50]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </ul>
      <div v-if="!tableData.length" class="no-data">
        <img :src="require('../../assets/noData.jpg')" />
      </div>
    </div>
</div>
    <!-- 签名 -->
    <div class="agency_dialog" v-if="showCanvas">
      <!--<el-dialog :destroy-on-close="true" :visible.sync="showCanvas" append-to-body width="90%" >-->
      <h5Canvas @signatureConfirmation="signatureConfirmation"  @closeCanvas="closeCanvas" :isMobile="isMobile"></h5Canvas>
      <!--</el-dialog>-->
    </div>

  </div>
</template>

<script>
import {getHistoryLook, postWithdraw,myBeDone, postrejectProcess, posApproveProcess ,uploadFile ,mySignFile} from "@/api/user";
import { downloadFileById ,downLoadForPdf} from "@/api/importApply.js";
import { drawApplyDetail ,getwlId} from '@/api/materialScience/materialRequisition.js'
import { applyReturnStockDetail } from '@/api/materialScience/stockReturn.js'
import { mapState } from "vuex";
import historyLook from "@/components/historyLook";
import h5Canvas from './h5Canvas.vue'
import  mobileDetail from  './mobileDetail.vue'
export default {
  components: {
    historyLook,
    h5Canvas,
    mobileDetail
  },
  computed: {
    ...mapState(["authList"]),
  },
  data: () => ({
    isMobile: false,
    noMore: false,
    //签名
    showCanvas:false,
    //详情
    showDetail:false,
    lookType:'',
    detailData:{
      materailDTOS:[{
        materailName:'',
        materailNumber:'',
        singlePrice:'',
        amount:'',
        unit:''
      }]
    },
    //列表
    loading: false,
    queryInfo: {
      pageNo: 1,
      pageSize: 10,
    },
    tableData: [],
    total: 0,
    visible: false,
    row: {},
    historyTables: []
  }),
  created() {
    if (this.$utils.isMobile()) {

      this.isMobile = true;
    }
    this.getList();
  },

  methods: {
    // open(){
    //   this.showCanvas = true
    // },
    // 审批历史
    history(row) {
      getHistoryLook(row.processInstanceId).then((res) => {
        this.historyTables = res.data.data;
        this.visible = true;
      });
    },
    authFilter(code) {
      let flag = false;
      if (this.authList.length) {
        this.authList.forEach((item) => {
          if (item.resourceCode == code) {
            flag = true;
          }
        });
      }
      return flag;
    },
    //错误提示
    errorNotify(message) {
      this.$notify.error({
        message:this.$createElement('div', { style: 'color: #F56C6C'}, message),
        duration:0
      });
    },
    //成功提示
    successNotify(message) {
      this.$notify.success({
        message:this.$createElement('div', { style: 'color: #67C23A'}, message),
        duration:0
      });
    },

    approva(row) {
      this.$prompt("审批", {
        distinguishCancelAndClose: true,
        confirmButtonText: "同意",
        cancelButtonText: "驳回",
      })
        .then(({ value }) => {
          this.documentId=row.documentId
          this.opinion=value
          if(this.isMobile) {
            this.showCanvas = true
          }else{ //pc
            this.mySignFile()
          }
        })
        .catch((value) => {
          if (value !== "cancel") return;
          this.$loading();
          postrejectProcess({
            documentId: row.documentId,
            opinion: document.querySelector(".el-message-box__input input").value,
          }).then((res) => {
            let { data } = res;
            this.$loading().close();
            if (data.code == "200") {
              this.successNotify('驳回成功')
              this.getList();
            } else {
              this.errorNotify(data.message)
            }
          });
        });
    },
    closeCanvas(){
      this.showCanvas = false
    },
    //审批同意
    signatureConfirmation(signFileName){
    this.closeCanvas()
      this.$loading();
      posApproveProcess({
        documentId: this.documentId,
        opinion: this.value,
        signFileName
      }).then((res) => {
        let { data } = res;
        this.$loading().close();
        if (data.code == "200") {
          this.successNotify('审批通过')
          this.showCanvas = false
          this.getList();
        } else {
          this.showCanvas = false
          this.errorNotify(data.message)
        }
      });
    },
    //获取当前用户签名
    mySignFile(){
      mySignFile().then(res=>{
        if(res.data.code === 500){
          this.showCanvas = true
         alert('未获取到你的签名，请手动填写')
        }else{
          this.signatureConfirmation(res.data.data)
        }
      })
    },
    // 获取待办list
    getList() {
      this.loading = true;
      myBeDone(this.queryInfo)
        .then((res) => {
          this.loading = false;
          if (res.data.code != 200) {
            this.$message.error(res.data.message);
            return;
          }
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    handleCurrentChange(val) {
      this.queryInfo.pageNo = val;
      this.getList();
    },
    handleSizeChange(size) {
      this.queryInfo.pageSize = size;
      this.getList();
    },
    look(row) {
      switch (row.documentTable) {
        case "stock_return_apply":
          this.showDetail = true
          this.lookType = row.documentTable
          this.applyReturnStockDetail(row.documentId)
          break
        case "materail_draw_apply":
          this.showDetail = true
          this.lookType = row.documentTable
          this.drawApplyDetail(row.documentId)
          break
        case "material_basic_info":
          this.$router.push({
            name: "materialScience",
            params: {
              id: row.documentId,
            },
          });
          break;
        case "procurement_plan":
          this.$router.push({
            name: "purchase",
            params: {
              id: row.documentId,
            },
          });
          break;
        case "warehousing_apply":
          this.$router.push({
            name: "warehousingApplication",
            params: {
              id: row.documentId,
            },
          });
          break;
        case "import_approval_apply":
          downloadFileById(row.documentId).then((res) => {
            if (res.data.code != 200) {
              return $this.$message.error(res.data.message);
            }
            window.open(res.data.data);
          });
          break;
        default:
          break;
      }
    },
    lookMobile(item){
      //退库
      if(item.documentTable === 'stock_return_apply') {
        this.showDetail = true
        this.lookType = item.documentTable
        this.applyReturnStockDetail(item.documentId)
       // this.findReturnMaterailDetail(item.documentId)
      }
      //领用
      if(item.documentTable === 'materail_draw_apply') {
        this.showDetail = true
        this.lookType = item.documentTable
        this.drawApplyDetail(item.documentId)
        // this.getwlId(item.documentId)
      }
    },
    // 物料退库详情
    applyReturnStockDetail (id) {
      this.loading = true
      applyReturnStockDetail(id).then(res => {
        this.loading = false
        if (res.data.code != 200) {
          this.errorNotify(res.data.message)
          return
        }
        this.detailData = res.data.data
      }).catch(err => { this.loading = false })
    },
    // 退库申请材料详情
    // findReturnMaterailDetail (id) {
    //   this.loading = true
    //   findReturnMaterailDetail(id).then(res => {
    //     this.loading = false
    //   if (res.data.code != 200) {
    //     return this.$message.error(res.data.message)
    //   }
    //   this.detailData = res.data.data
    // }).catch(err => { this.loading = false })
    // },
    //物资领用申请详情
    drawApplyDetail(id) {
      this.loading = true
      drawApplyDetail(id).then(res => {
        this.loading = false
        if (res.data.code != 200) {
          return   this.errorNotify(res.data.message)
        }
        this.detailData = res.data.data
      }).catch(err => {
        this.loading = false
      })
    },
    // 领用物资材料详情
    // getwlId(id){
    //   this.loading = true
    //   getwlId(id).then(res => {
    //     this.loading = false
    //     if (res.data.code != 200) {
    //       return this.$message.error(res.data.message)
    //     }
    //     this.detailData = res.data.data
    //   }).catch(err => {
    //     this.loading = false
    //   })
    // }
  },
};
</script>

<style scoped lang="scss">
.agency_dialog{
  height: 90vh;
  width: 95vw;
  margin: 10px auto;
}
.avatar-img {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  align-items: center;
}

.id-tel-input {
  border: none;
  outline: none;
}

.preview-image-wrap {
  .preview-image {
    display: block;
    max-width: 100%;
    height: 200px;
  }
}
@mixin box-width {
  width: 90%;
  margin: 10px auto;
}
.mobile-box {
  position: relative;
  .btn-data {
    @include box-width;
  }
  ul {
    padding: 0;
    & > li {
      @include box-width;
      list-style-type: none;
      .btn-box {
        text-align: right;
        margin-bottom: 10px;
      }
    }
  }
  .no-data{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    img{
      width: 400px;
    }
  }
  .btnBox {
    padding: 10px;
    text-align: center;

  }
}
</style>

